Pure.CSS একটি হালকা ওজনের এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক যা ওয়েব ডিজাইন দ্রুত এবং সহজ করতে সাহায্য করে। এটি ওয়েব ফর্ম উপাদানগুলির জন্য বেশ কিছু প্রাথমিক স্টাইল প্রদান করে, যেমন Input, Textarea, Checkbox, এবং Radio Button। তবে, আপনি এই উপাদানগুলির জন্য অতিরিক্ত কাস্টমাইজেশনও করতে পারেন।
এখানে, আমরা Pure.CSS ব্যবহার করে এই ফর্ম উপাদানগুলির স্টাইলিং দেখব।
1. Input Field Styling with Pure.CSS
Input fields হল ফর্মের অন্যতম গুরুত্বপূর্ণ অংশ যা ব্যবহারকারীর ইনপুট গ্রহণ করে। Pure.CSS একটি সুন্দর এবং ক্লিন স্টাইল প্রদান করে, তবে আপনি এর স্টাইল আরও কাস্টমাইজ করতে পারেন।
Input Field Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Input Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.custom-input {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<input type="text" class="pure-input-1 custom-input" placeholder="Enter your name">
<input type="email" class="pure-input-1 custom-input" placeholder="Enter your email">
</body>
</html>
ব্যাখ্যা:
- Pure.CSS এর
pure-input-1ক্লাসটি ইনপুট ফিল্ডে একটি মৌলিক স্টাইল যোগ করে। - Custom styles যেমন
border-radius,font-size,paddingএবংborderব্যবহার করে ইনপুট ফিল্ডটির স্টাইল উন্নত করা হয়েছে।
2. Textarea Styling with Pure.CSS
Textarea ফিল্ড ব্যবহারকারীর জন্য একটি বড় এলাকা প্রদান করে যেখানে তারা বড় ইনপুট বা মন্তব্য করতে পারে। Pure.CSS এ textarea এর জন্য প্রাথমিক স্টাইল রয়েছে।
Textarea Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Textarea Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.custom-textarea {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1em;
margin-bottom: 20px;
height: 150px;
}
</style>
</head>
<body>
<textarea class="pure-input-1 custom-textarea" placeholder="Enter your message"></textarea>
</body>
</html>
ব্যাখ্যা:
- Pure.CSS এর
pure-input-1ক্লাসটি ব্যবহার করা হয়েছে, যা টেক্সট এরিয়া ফিল্ডে বেসিক স্টাইল প্রয়োগ করে। - Custom styles যেমন
height,padding,border-radius, এবংborderএর মাধ্যমে ফিল্ডটির কাস্টমাইজেশন করা হয়েছে।
3. Checkbox Styling with Pure.CSS
Checkbox ফিল্ড সাধারণত ব্যবহারকারীর কাছ থেকে একটি সিলেকশন গ্রহণ করতে ব্যবহৃত হয়। Pure.CSS এ এটি একটি খুব সিম্পল এবং স্টাইলিশ চেকবক্স তৈরি করে।
Checkbox Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Checkbox Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<label class="pure-checkbox">
<input type="checkbox"> I agree to the terms and conditions
</label>
</body>
</html>
ব্যাখ্যা:
- Pure.CSS এর
pure-checkboxক্লাসটি একটি সিম্পল এবং আধুনিক চেকবক্স তৈরি করে। - চেকবক্সের পাশে একটি লেবেল রয়েছে যা ব্যবহারকারীর কাছে বোধগম্য।
4. Radio Button Styling with Pure.CSS
Radio buttons সাধারণত একাধিক বিকল্পের মধ্যে একটি নির্বাচন করার জন্য ব্যবহৃত হয়। Pure.CSS এর মাধ্যমে আপনি সেগুলিকে একটি সহজ ও স্টাইলিশ ডিজাইন করতে পারেন।
Radio Button Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Radio Button Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<label class="pure-radio">
<input type="radio" name="option" value="option1"> Option 1
</label>
<label class="pure-radio">
<input type="radio" name="option" value="option2"> Option 2
</label>
</body>
</html>
ব্যাখ্যা:
- Pure.CSS এর
pure-radioক্লাসটি একটি সিম্পল রেডিও বাটন তৈরি করে, যার মাধ্যমে আপনি একটি গ্রুপের মধ্যে থেকে একটি নির্বাচন করতে পারবেন। - এই স্টাইলিংটি রেডিও বাটনের ডিজাইনকে পরিষ্কার এবং আধুনিক করে তোলে।
5. Using Pure.CSS Form Elements Together
এখন, আমরা সমস্ত উপাদান একত্রে ব্যবহার করে একটি ফর্ম তৈরি করি, যা Input, Textarea, Checkbox, এবং Radio Button ব্যবহার করবে।
Full Form Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Form Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.pure-button {
width: 100%;
}
</style>
</head>
<body>
<form class="pure-form">
<label for="name">Name:</label>
<input type="text" id="name" class="pure-input-1" placeholder="Enter your name">
<label for="message">Message:</label>
<textarea id="message" class="pure-input-1" placeholder="Enter your message"></textarea>
<label class="pure-checkbox">
<input type="checkbox"> I agree to the terms and conditions
</label>
<label class="pure-radio">
<input type="radio" name="option" value="option1"> Option 1
</label>
<label class="pure-radio">
<input type="radio" name="option" value="option2"> Option 2
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</body>
</html>
ব্যাখ্যা:
- এখানে একটি সম্পূর্ণ ফর্ম তৈরি করা হয়েছে, যেখানে input, textarea, checkbox, এবং radio buttons ব্যবহার করা হয়েছে।
- Pure.CSS এর
pure-formক্লাস ব্যবহার করে একটি সিম্পল ফর্ম ডিজাইন করা হয়েছে। - Button এর জন্য
pure-button pure-button-primaryক্লাস ব্যবহার করা হয়েছে, যা একটি স্টাইলিশ বাটন তৈরি করে।
Pure.CSS ব্যবহার করে Input, Textarea, Checkbox, এবং Radio Button ফর্ম উপাদানগুলির স্টাইলিং করা অত্যন্ত সহজ। Pure.CSS এর প্রস্তুত করা ক্লাসগুলির মাধ্যমে, আপনি সহজে একটি সুন্দর এবং প্রফেশনাল লুকিং ফর্ম তৈরি করতে পারেন। এছাড়া, আপনি কাস্টম স্টাইল ব্যবহার করে এগুলির ডিজাইন আরও সুন্দর এবং ব্যবহারকারী-বান্ধব করতে পারেন।
Read more
